<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul></ul>

    <div class="total-container">
        <span class="count">共0件</span>
        <span class="price">共0元</span>
    </div>

    <script src="./jq/lib/jquery.min.js"></script>
    <script>

        const data = [
            {
                goodsName: '张三',
                price: 998,
                count: 1,
                selected: false,
            },
            {
                goodsName: '李四',
                price: 198,
                count: 1,
                selected: false,
            },
            {
                goodsName: '王麻子',
                price: 298,
                count: 1,
                selected: false,
            },
        ];

        function render () {
            // 生成所有li
            let dom = '';
            for (const item of data) {
                dom += `
                    <li>
                        <input class="select" type="checkbox" ${ item.selected ? 'checked' : '' }>
                        <span class="price">￥${ item.price }</span>

                        <button class="dec">-</button>
                        <span class="num">${ item.count }</span>
                        <button class="inc">+</button>

                        <span class="total">￥${ item.count * item.price }</span>
                        <button class="del">del</button>
                    </li>
                `;
            }
            $('ul').html(dom);
            // 给加号按钮绑定点击事件
            $('.inc').on('click', onIncrement);
            // 给减号按钮绑定点击事件
            $('.dec').on('click', onDecrement);
            // 给删除按钮绑定点击事件
            $('.del').on('click', onDelete);
            // 给复选框绑定更改事件
            $('.select').on('change', onSelect);
            // 计算总件数和总价格
            $('.total-container .count').text(`共${ getSum('count') }件`);
            $('.total-container .price').text(`共${ getSum('price') }元`);
        }

        function onIncrement (e) {
            // 获取索引
            const idx = $(this).parent().index();
            // 操作数据
            data[idx].count++;
            // 根据新数据渲染DOM
            render();
        }
        function onDecrement (e) {
            // 获取索引
            const idx = $(this).parent().index();
            // 操作数据
            if (data[idx].count > 1) {
                data[idx].count--;
                // 根据新数据渲染DOM
                render();
            }
        }
        function onDelete (e) {
            // 获取索引
            const idx = $(this).parent().index();
            // 操作数据
            data.splice(idx, 1);
            // 根据新数据渲染DOM
            render();
        }
        function onSelect (e) {
            // 获取索引
            const idx = $(this).parent().index();
            // 操作数据
            data[idx].selected = !data[idx].selected;
            // 根据新数据渲染DOM
            render();
        }
        // 根据key值求和
        function getSum (key) {
            let sum = 0;
            for (const item of data) {
                // 选中了才求和
                if (item.selected) {
                    if (key === 'price') {
                        sum += item.price * item.count;
                    } else {
                        sum += item[key];
                    }
                }
            }
            return sum;
        }

        render();

        // 点击按钮之后要做的事
        $('li input:checked').parent().remove();

    </script>
</body>
</html>